﻿<!--*************************************************************************************

   Toolkit for WPF

   Copyright (C) 2007-2016 Xceed Software Inc.

   This program is provided to you under the terms of the Microsoft Public
   License (Ms-PL) as published at http://wpftoolkit.codeplex.com/license 

   For more features, controls, and fast professional support,
   pick up the Plus Edition at https://xceed.com/xceed-toolkit-plus-for-wpf/

   Stay informed: follow @datagrid on Twitter or Like http://facebook.com/datagrids

  ***********************************************************************************-->
<local:DemoView x:Class="Xceed.Wpf.Toolkit.LiveExplorer.Samples.RangeSlider.Views.RangeSliderView"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:sys="clr-namespace:System;assembly=mscorlib"
                xmlns:local="clr-namespace:Xceed.Wpf.Toolkit.LiveExplorer"
                xmlns:xctkconv="clr-namespace:Xceed.Wpf.Toolkit.Core.Converters;assembly=Xceed.Wpf.Toolkit"
                xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
                Title="RangeSlider">

   <local:DemoView.Resources>

      <xctkconv:SolidColorBrushToColorConverter x:Key="SolidColorBrushToColorConverter" />

      <Style x:Key="LowerRangeStyle1"
             TargetType="{x:Type RepeatButton}">

         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate  TargetType="{x:Type RepeatButton}">
                  <Grid x:Name="MainGrid"
                        Height="10">
                     <Rectangle x:Name="MainBorder"
                                Fill="{TemplateBinding Background}"
                                Opacity="1" />
                  </Grid>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver"
                              Value="True">
                        <Setter TargetName="MainBorder"
                                Property="Opacity"
                                Value="0.75" />
                     </Trigger>
                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Orientation}"
                                  Value="Vertical">
                        <Setter Property="Height"
                                TargetName="MainGrid"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="MainGrid"
                                Value="10" />
                     </DataTrigger>
                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>

      </Style>

      <Style x:Key="LowerRangeStyle2"
             TargetType="{x:Type RepeatButton}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type RepeatButton}">
                  <Grid x:Name="MainGrid"
                        Height="10">
                     <Ellipse x:Name="MainBorder"
                              Fill="{TemplateBinding Background}"
                              Opacity="1" />
                  </Grid>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver"
                              Value="True">
                        <Setter TargetName="MainBorder"
                                Property="Opacity"
                                Value="0.75" />
                     </Trigger>
                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Orientation}"
                                  Value="Vertical">
                        <Setter Property="Height"
                                TargetName="MainGrid"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="MainGrid"
                                Value="10" />
                     </DataTrigger>

                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

      <Style x:Key="LowerRangeStyle3"
             TargetType="{x:Type RepeatButton}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type RepeatButton}">
                  <Grid x:Name="MainGrid"
                        Height="19">
                     <Rectangle x:Name="MainBorder"
                                Fill="{TemplateBinding Background}"
                                Opacity="1" />
                     <StackPanel x:Name="HorizontalContentPanel"
                                 Orientation="Horizontal"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center">
                        <TextBlock x:Name="TextContentMin"
                                   Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type xctk:RangeSlider}}, Path=Minimum, StringFormat=\{0:00.00\}}"
                                   Foreground="White"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                        <TextBlock  Text=" - "
                                    Foreground="Turquoise"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center" />
                        <TextBlock x:Name="TextContentLower"
                                   Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type xctk:RangeSlider}}, Path=LowerValue, StringFormat=\{0:00.00\}}"
                                   Foreground="White"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                     </StackPanel>
                     <StackPanel x:Name="VerticalContentPanel"
                                 Orientation="Vertical"
                                 Visibility="Collapsed"
                                 VerticalAlignment="Center">
                        <TextBlock Text="L"
                                   Foreground="White" />
                     </StackPanel>
                  </Grid>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver"
                              Value="True">
                        <Setter TargetName="MainBorder"
                                Property="Opacity"
                                Value="0.75" />
                     </Trigger>
                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Orientation}"
                                  Value="Vertical">
                        <Setter Property="Height"
                                TargetName="MainGrid"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="MainGrid"
                                Value="30" />
                        <Setter Property="Visibility"
                                TargetName="VerticalContentPanel"
                                Value="Visible" />
                        <Setter Property="Visibility"
                                TargetName="HorizontalContentPanel"
                                Value="Collapsed" />
                     </DataTrigger>

                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

      <Style x:Key="RangeStyle1"
             TargetType="{x:Type RepeatButton}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate  TargetType="{x:Type RepeatButton}">
                  <Grid x:Name="MainGrid"
                        Height="10">
                     <Rectangle x:Name="MainBorder"
                                Fill="{TemplateBinding Background}"
                                Opacity="1" />
                  </Grid>
                  <ControlTemplate.Triggers>
                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Orientation}"
                                  Value="Vertical">
                        <Setter Property="Height"
                                TargetName="MainGrid"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="MainGrid"
                                Value="10" />
                     </DataTrigger>

                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

      <Style x:Key="RangeStyle2"
             TargetType="{x:Type RepeatButton}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type RepeatButton}">
                  <Grid x:Name="MainGrid"
                        Height="10">
                     <Ellipse x:Name="MainBorder"
                              Fill="{TemplateBinding Background}" />
                  </Grid>
                  <ControlTemplate.Triggers>
                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Orientation}"
                                  Value="Vertical">
                        <Setter Property="Height"
                                TargetName="MainGrid"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="MainGrid"
                                Value="10" />
                     </DataTrigger>

                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

      <Style x:Key="RangeStyle3"
             TargetType="{x:Type RepeatButton}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type RepeatButton}">
                  <Grid x:Name="MainGrid"
                        Height="19">
                     <Rectangle x:Name="MainBorder"
                                Fill="{TemplateBinding Background}"
                                Opacity="1" />
                     <StackPanel x:Name="HorizontalContentPanel"
                                 Orientation="Horizontal"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center">
                        <TextBlock x:Name="TextContentLower"
                                   Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type xctk:RangeSlider}}, Path=LowerValue, StringFormat=\{0:00.00\}}"
                                   Foreground="White"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                        <TextBlock  Text=" - "
                                    Foreground="Turquoise"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center" />
                        <TextBlock x:Name="TextContentHigher"
                                   Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type xctk:RangeSlider}}, Path=HigherValue, StringFormat=\{0:00.00\}}"
                                   Foreground="White"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                     </StackPanel>
                     <StackPanel x:Name="VerticalContentPanel"
                                 Orientation="Vertical"
                                 Visibility="Collapsed"
                                 VerticalAlignment="Center">
                        <TextBlock Text="R"
                                   Foreground="White" />
                     </StackPanel>
                  </Grid>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver"
                              Value="True">
                        <Setter TargetName="TextContentLower"
                                Property="Foreground"
                                Value="Fuchsia" />
                        <Setter TargetName="TextContentHigher"
                                Property="Foreground"
                                Value="Fuchsia" />
                     </Trigger>

                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Orientation}"
                                  Value="Vertical">
                        <Setter Property="Height"
                                TargetName="MainGrid"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="MainGrid"
                                Value="30" />
                        <Setter Property="Visibility"
                                TargetName="VerticalContentPanel"
                                Value="Visible" />
                        <Setter Property="Visibility"
                                TargetName="HorizontalContentPanel"
                                Value="Collapsed" />
                     </DataTrigger>

                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

      <Style x:Key="HigherRangeStyle1"
             TargetType="{x:Type RepeatButton}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate  TargetType="{x:Type RepeatButton}">
                  <Grid x:Name="MainGrid"
                        Height="10">
                     <Rectangle x:Name="MainBorder"
                                Fill="{TemplateBinding Background}"
                                Opacity="1" />
                  </Grid>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver"
                              Value="True">
                        <Setter TargetName="MainBorder"
                                Property="Opacity"
                                Value="0.75" />
                     </Trigger>

                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Orientation}"
                                  Value="Vertical">
                        <Setter Property="Height"
                                TargetName="MainGrid"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="MainGrid"
                                Value="10" />
                     </DataTrigger>
                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

      <Style x:Key="HigherRangeStyle2"
             TargetType="{x:Type RepeatButton}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type RepeatButton}">
                  <Grid x:Name="MainGrid"
                        Height="10">
                     <Ellipse x:Name="MainBorder"
                              Fill="{TemplateBinding Background}"
                              Opacity="1" />
                  </Grid>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver"
                              Value="True">
                        <Setter TargetName="MainBorder"
                                Property="Opacity"
                                Value="0.75" />
                     </Trigger>

                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Orientation}"
                                  Value="Vertical">
                        <Setter Property="Height"
                                TargetName="MainGrid"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="MainGrid"
                                Value="10" />
                     </DataTrigger>

                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

      <Style x:Key="HigherRangeStyle3"
             TargetType="{x:Type RepeatButton}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type RepeatButton}">
                  <Grid x:Name="MainGrid"
                        Height="19">
                     <Rectangle x:Name="MainBorder"
                                Fill="{TemplateBinding Background}"
                                Opacity="1" />
                     <StackPanel x:Name="HorizontalContentPanel"
                                 Orientation="Horizontal"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center">
                        <TextBlock x:Name="TextContentHigher"
                                   Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type xctk:RangeSlider}}, Path=HigherValue, StringFormat=\{0:00.00\}}"
                                   Foreground="White"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                        <TextBlock  Text=" - "
                                    Foreground="Turquoise"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center" />
                        <TextBlock x:Name="TextContentMax"
                                   Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type xctk:RangeSlider}}, Path=Maximum, StringFormat=\{0:00.00\}}"
                                   Foreground="White"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                     </StackPanel>
                     <StackPanel x:Name="VerticalContentPanel"
                                 Orientation="Vertical"
                                 Visibility="Collapsed"
                                 VerticalAlignment="Center">
                        <TextBlock Text="H"
                                   Foreground="White" />
                     </StackPanel>
                  </Grid>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsMouseOver"
                              Value="True">
                        <Setter TargetName="MainBorder"
                                Property="Opacity"
                                Value="0.75" />
                     </Trigger>

                     <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Orientation}"
                                  Value="Vertical">
                        <Setter Property="Height"
                                TargetName="MainGrid"
                                Value="Auto" />
                        <Setter Property="Width"
                                TargetName="MainGrid"
                                Value="30" />
                        <Setter Property="Visibility"
                                TargetName="VerticalContentPanel"
                                Value="Visible" />
                        <Setter Property="Visibility"
                                TargetName="HorizontalContentPanel"
                                Value="Collapsed" />
                     </DataTrigger>

                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

   </local:DemoView.Resources>

   <local:DemoView.Description>
      <Paragraph FontSize="14"
                 FontFamily="Segoe">
         The RangeSlider control lets you set a range with 2 slider thumbs. The lower limit is marked with the right side of the left thumb while the higher limit is marked with the left side of the right thumb.
      </Paragraph>
   </local:DemoView.Description>

   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="300" />
      </Grid.RowDefinitions>

      <GroupBox Header="Features"
                Grid.Row="0"
                Margin="5">
         <Grid Margin="5">
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="75" />
               <ColumnDefinition Width="100" />
               <ColumnDefinition Width="160" />
               <ColumnDefinition Width="100" />
               <ColumnDefinition Width="118" />
               <ColumnDefinition Width="100" />
            </Grid.ColumnDefinitions>

            <!-- Column 1 -->
            <TextBlock Text="Minimum:"
                       VerticalAlignment="Center" />
            <xctk:DoubleUpDown Grid.Column="1"
                               Value="{Binding Minimum, ElementName=_rangeSlider}"
                               FormatString="0.00"
                               Increment="{Binding Step, ElementName=_rangeSlider}"
                               VerticalAlignment="Center"
                               Margin="5" />

            <TextBlock Text="Maximum:"
                       Grid.Row="1"
                       VerticalAlignment="Center" />
            <xctk:DoubleUpDown Value="{Binding Maximum, ElementName=_rangeSlider}"
                               Grid.Row="1"
                               Grid.Column="1"
                               FormatString="0.00"
                               Increment="{Binding Step, ElementName=_rangeSlider}"
                               VerticalAlignment="Center"
                               Margin="5" />

            <TextBlock Text="Lower Value:"
                       Grid.Row="2"
                       VerticalAlignment="Center" />
            <xctk:DoubleUpDown Value="{Binding LowerValue, ElementName=_rangeSlider }"
                               Grid.Row="2"
                               Grid.Column="1"
                               FormatString="0.00"
                               Increment="{Binding Step, ElementName=_rangeSlider}"
                               VerticalAlignment="Center"
                               Margin="5" />

            <TextBlock Text="Higher Value:"
                       Grid.Row="3"
                       VerticalAlignment="Center" />
            <xctk:DoubleUpDown Value="{Binding HigherValue, ElementName=_rangeSlider}"
                               Grid.Row="3"
                               Grid.Column="1"
                               FormatString="0.00"
                               Increment="{Binding Step, ElementName=_rangeSlider}"
                               VerticalAlignment="Center"
                               Margin="5" />

            <TextBlock Text="Step:"
                       Grid.Row="4"
                       VerticalAlignment="Center" />
            <xctk:DoubleUpDown Value="{Binding Step, ElementName=_rangeSlider}"
                               Grid.Row="4"
                               Grid.Column="1"
                               FormatString="0.00"
                               VerticalAlignment="Center"
                               Margin="5" />

            <TextBlock Text="Orientation:"
                       Grid.Row="5"
                       VerticalAlignment="Center" />
            <ComboBox Grid.Row="5"
                      Grid.Column="1"
                      SelectedIndex="0"
                      SelectedValue="{Binding Orientation, ElementName=_rangeSlider}"
                      SelectedValuePath="Content"
                      VerticalAlignment="Center"
                      Margin="5">
               <ComboBoxItem Content="Horizontal" />
               <ComboBoxItem Content="Vertical" />
            </ComboBox>

            <!-- Column 2 -->
            <TextBlock Text="Lower Thumb Background:"
                       Grid.Column="2"
                       VerticalAlignment="Center"
                       Margin="10,5,5,5" />
            <xctk:ColorPicker Grid.Column="3"
                              SelectedColor="{Binding LowerThumbBackground, ElementName=_rangeSlider, Converter={StaticResource SolidColorBrushToColorConverter}}"
                              VerticalAlignment="Center"
                              Margin="5" />

            <TextBlock Text="Higher Thumb Background:"
                       Grid.Row="1"
                       Grid.Column="2"
                       VerticalAlignment="Center"
                       Margin="10,5,5,5" />
            <xctk:ColorPicker Grid.Row="1"
                              Grid.Column="3"
                              SelectedColor="{Binding HigherThumbBackground, ElementName=_rangeSlider, Converter={StaticResource SolidColorBrushToColorConverter}}"
                              VerticalAlignment="Center"
                              Margin="5" />

            <TextBlock Text="Lower Range Background:"
                       Grid.Row="2"
                       Grid.Column="2"
                       VerticalAlignment="Center"
                       Margin="10,5,5,5" />
            <xctk:ColorPicker Grid.Row="2"
                              Grid.Column="3"
                              SelectedColor="{Binding LowerRangeBackground, ElementName=_rangeSlider, Converter={StaticResource SolidColorBrushToColorConverter}}"
                              VerticalAlignment="Center"
                              Margin="5" />

            <TextBlock Text="Range Background:"
                       Grid.Row="3"
                       Grid.Column="2"
                       VerticalAlignment="Center"
                       Margin="10,5,5,5" />
            <xctk:ColorPicker Grid.Row="3"
                              Grid.Column="3"
                              SelectedColor="{Binding RangeBackground, ElementName=_rangeSlider, Converter={StaticResource SolidColorBrushToColorConverter}}"
                              VerticalAlignment="Center"
                              Margin="5" />

            <TextBlock Text="Higher Range Background:"
                       Grid.Row="4"
                       Grid.Column="2"
                       VerticalAlignment="Center"
                       Margin="10,5,5,5" />
            <xctk:ColorPicker Grid.Row="4"
                              Grid.Column="3"
                              SelectedColor="{Binding HigherRangeBackground, ElementName=_rangeSlider, Converter={StaticResource SolidColorBrushToColorConverter}}"
                              VerticalAlignment="Center"
                              Margin="5" />

            <TextBlock Text="Is Deferred Update Values:"
                       Grid.Row="5"
                       Grid.Column="2"
                       VerticalAlignment="Center"
                       Margin="10,5,5,5" />
            <CheckBox Grid.Row="5"
                      Grid.Column="3"
                      IsChecked="{Binding IsDeferredUpdateValues, ElementName=_rangeSlider}"
                      VerticalAlignment="Center"
                      Margin="5"
                      ToolTip="Gets/Sets if the LowerValue and HigherValue should be updated only on mouse up."/>

            <!-- Column 3 -->
            <TextBlock Text="Lower Range Style:"
                       Grid.Column="4"
                       VerticalAlignment="Center"
                       Margin="10,5,5,5" />
            <ComboBox x:Name="lowerRangeStyleComboBox"
                      Grid.Column="5"
                      SelectedIndex="0"
                      SelectedValue="{Binding LowerRangeStyle, ElementName=_rangeSlider}"
                      SelectedValuePath="Tag"
                      SelectionChanged="RangeStyleComboBox_SelectionChanged"
                      VerticalAlignment="Center"
                      Margin="5">
               <ComboBoxItem Content="Default"
                             Tag="{x:Null}" />
               <ComboBoxItem Content="Style 1"
                             Tag="{StaticResource LowerRangeStyle1}" />
               <ComboBoxItem Content="Style 2"
                             Tag="{StaticResource LowerRangeStyle2}" />
               <ComboBoxItem Content="Style 3"
                             Tag="{StaticResource LowerRangeStyle3}" />
            </ComboBox>

            <TextBlock Text="Range Style:"
                       Grid.Row="1"
                       Grid.Column="4"
                       VerticalAlignment="Center"
                       Margin="10,5,5,5" />
            <ComboBox x:Name="rangeStyleComboBox"
                      Grid.Row="1"
                      Grid.Column="5"
                      SelectedIndex="0"
                      SelectedValue="{Binding RangeStyle, ElementName=_rangeSlider}"
                      SelectedValuePath="Tag"
                      SelectionChanged="RangeStyleComboBox_SelectionChanged"
                      VerticalAlignment="Center"
                      Margin="5">
               <ComboBoxItem Content="Default"
                             Tag="{x:Null}" />
               <ComboBoxItem Content="Style 1"
                             Tag="{StaticResource RangeStyle1}" />
               <ComboBoxItem Content="Style 2"
                             Tag="{StaticResource RangeStyle2}" />
               <ComboBoxItem Content="Style 3"
                             Tag="{StaticResource RangeStyle3}" />
            </ComboBox>

            <TextBlock Text="Higher Range Style:"
                       Grid.Row="2"
                       Grid.Column="4"
                       VerticalAlignment="Center"
                       Margin="10,5,5,5" />
            <ComboBox x:Name="higherRangeStyleComboBox"
                      Grid.Row="2"
                      Grid.Column="5"
                      SelectedIndex="0"
                      SelectedValue="{Binding HigherRangeStyle, ElementName=_rangeSlider}"
                      SelectedValuePath="Tag"
                      SelectionChanged="RangeStyleComboBox_SelectionChanged"
                      VerticalAlignment="Center"
                      Margin="5">
               <ComboBoxItem Content="Default"
                             Tag="{x:Null}" />
               <ComboBoxItem Content="Style 1"
                             Tag="{StaticResource HigherRangeStyle1}" />
               <ComboBoxItem Content="Style 2"
                             Tag="{StaticResource HigherRangeStyle2}" />
               <ComboBoxItem Content="Style 3"
                             Tag="{StaticResource HigherRangeStyle3}" />
            </ComboBox>
         </Grid>
      </GroupBox>

      <StackPanel Grid.Row="1"
                  Margin="10">
         <TextBlock Text="Usage:"
                    Style="{StaticResource Header}" />
         <xctk:RangeSlider x:Name="_rangeSlider"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           Minimum="0"
                           Maximum="100"
                           LowerValue="30"
                           HigherValue="70"
                           Step="1"
                           Orientation="Horizontal"
                           LowerThumbBackground="#FFF0F0F0"
                           HigherThumbBackground="#FFF0F0F0"
                           RangeBackground="Transparent"
                           HigherRangeBackground="Transparent"
                           LowerRangeBackground="Transparent"
                           HigherRangeStyle="{x:Null}"
                           RangeStyle="{x:Null}"
                           LowerRangeStyle="{x:Null}"
                           IsDeferredUpdateValues="False">
            <xctk:RangeSlider.Resources>
               <Style TargetType="xctk:RangeSlider">
                  <Style.Triggers>
                     <Trigger Property="Orientation"
                              Value="Horizontal">
                        <Setter Property="Width"
                                Value="600" />
                     </Trigger>
                     <Trigger Property="Orientation"
                              Value="Vertical">
                        <Setter Property="Height"
                                Value="225" />
                     </Trigger>
                  </Style.Triggers>
               </Style>
            </xctk:RangeSlider.Resources>
         </xctk:RangeSlider>
      </StackPanel>
   </Grid>
</local:DemoView>
